<template>
  <!-- element所有ico图标选择 -->
  <el-scrollbar class="warp">
    <ul class="list">
      <li
        class="item fl pointer"
        v-for="(item, index) in icoArr"
        :key="index"
        @click="handleSelect(item)"
      >
        <el-icon>
          <component :is="item" />
        </el-icon>
      </li>
    </ul>
  </el-scrollbar>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from "vue";
export default {
  name: "IcoSelect",
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      icoArr: proxy.$icoArr,
    });
    //图标选择
    const handleSelect = (item) => {
      context.emit("handleSelect", item);
    };
    return {
      ...toRefs(state),
      handleSelect, //图标选择
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  height: 300px;
  .list {
    .item {
      width: 10%;
      padding: 5px 0;
      text-align: center;
      :deep() {
        .el-icon svg {
          font-size: 24px;
        }
      }
    }
  }
}
</style>